<template>
	<div class="screen_wrap echarts_box flex_wrap">
		<corner></corner>
		<title1 title="企业热词"></title1>
		<div class="flex_body">
			<div id='main'></div>
		</div>
	</div>
</template>
<script>
	import { getHotNum } from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title1 from '../public/title1'
	export default {
		components: {
			corner,
			title1
		},
		data() {
			return {
				option: null,
				r: 3, // 求半径基数
				data: [],
				colorList: [
					[
						'#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
						'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
						'#1e90ff', '#ff6347', '#7b68ee', '#d0648a', '#ffd700',
						'#6b8e23', '#4ea397', '#3cb371', '#b8860b', '#7bd9a5'
					],
					[
						'#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
						'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
						'#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
						'#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
					],
					[
						'#a26fe8', '#f57048', '#f9aa4a', '#7dd361', '#4dcdda',
						'#6a74ed', '#a26fe8'
					]
				][2]
			}
		},
		mounted() {
			this.init()
		},
		methods: {

			init() {
				getHotNum().then(res => {
					res.data.data.forEach((item,index) => {
						let obj = {
							name: item.type,
							value: item.num,
                            textStyle: {
                                color: this.colorList[index%7]
                            },							
						}
						
						this.data.push(obj)
					})
					let that = this
					var chart = echarts.init(document.getElementById('main'));
					var option = {
						tooltip: {},
						series: [{
					        type: 'wordCloud',
		                    gridSize: 2,
		                    sizeRange: [12, 50],
		                    rotationRange: [-90, 90],
		                    shape: 'pentagon',
							data: this.data
						}]
					};
					chart.setOption(option);
				})

			}
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	
	#main {
		height: 100%;
		padding-top: 20px;
	}
	
	.body {
		flex: 1;
	}
</style>